<template>
  <view>

    <view class="item" style="flex-direction: column;align-items: flex-end;" v-if="dataBean.approveStatusStr">
      <text
          style="color: #FFC000;font-size: 30rpx;margin: 20rpx 20rpx 10rpx 0;">
        {{ dataBean.approveStatusStr|filterNull }}
      </text>
      <text v-if="dataBean.approveStatusRemark"
            style="color: #FF623D;font-size: 26rpx;margin: 0 20rpx 10rpx 0;">
        {{ dataBean.approveStatusRemark|filterNull }}
      </text>
    </view>

    <remind-carinfo :dataBean="dataBean"></remind-carinfo>

    <view class="item">

      <view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
        <u-icon name="order" color="#1573FF" label="出险信息" label-color="#333333"
                :customStyle="{'line-height': '80rpx',}">
        </u-icon>

        <!-- <text style="line-height: 80rpx; color: #E93131;">{{dataBean.carOutInsurance.repairStatusShow|filterNull}}</text> -->
      </view>


      <u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

      <view v-if="dataBean.carOutInsurance != null">

        <view class="text-line">
          <text class="text-name">接受时间:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.receiveDate|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">报案人:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.reporter|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">出险地点:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.outAddr|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">出险时间:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.outDate|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">出险经过及原因:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.outReason|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">事故等级:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.outLevelShow|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">预估定损金额/元:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.predictLossFee|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">责任方:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.responsiblePartyShow|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修厂名称:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.serviceName|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">保险赔付情况:</text>
        </view>

        <u-collapse v-if="dataBean.carOutInsurance.insuranceCompensationList.length > 0">
          <u-collapse-item v-for="(item,index) in dataBean.carOutInsurance.insuranceCompensationList"
                           :title="item.payInsuranceName"
                           name="Numerous tools">
            <collapse-detail v-model="dataBean.carOutInsurance.insuranceCompensationList[index]" :type="1"/>
          </u-collapse-item>
        </u-collapse>

        <view class="text-line">
          <text class="text-name">出险相关费用信息:</text>
        </view>

        <u-collapse v-if="dataBean.carOutInsurance.relatedCostsList.length > 0">
          <u-collapse-item v-for="(item,index) in dataBean.carOutInsurance.relatedCostsList"
                           :title="item.feeName"
                           name="Numerous tools">
            <collapse-detail v-model="dataBean.carOutInsurance.relatedCostsList[index]" :type="2"/>
          </u-collapse-item>
        </u-collapse>


        <view class="text-line">
          <text class="text-name">保险上浮费/元:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.floatFee|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">维修返佣/元:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.repairBackFee|filterNull }}</text>
        </view>

        <view class="text-line">
          <text class="text-name">商业险是否赔付:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.sxIsPayShow|filterNull }}</text>
        </view>

        <view v-show="dataBean.carOutInsurance.sxIsPay == 1">
          <view class="text-line">
            <text class="text-name">商业险赔付保险公司:</text>
            <text class="text-value">{{ dataBean.carOutInsurance.sxInsuranceCompanyName|filterNull }}</text>
          </view>

          <view class="text-line">
            <text class="text-name">商业险赔付时间:</text>
            <text class="text-value">{{ dataBean.carOutInsurance.sxPayDate|filterNull }}</text>
          </view>

          <view class="text-line">
            <text class="text-name">商业险保险公司赔付金额:</text>
            <text class="text-value">¥{{ dataBean.carOutInsurance.sxPayFee|filterNull }}</text>
          </view>
          <view class="text-line">
            <text class="text-name">商业险客户赔付金额:</text>
            <text
                class="text-value">¥{{ dataBean.carOutInsurance.sxCustomerPaymentAmount|filterNull }}
            </text>
          </view>
        </view>

        <view class="text-line">
          <text class="text-name">交强险是否赔付:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.qxIsPayShow|filterNull }}</text>
        </view>

        <view v-show="dataBean.carOutInsurance.qxIsPay == 1">
          <view class="text-line">
            <text class="text-name">交强险赔付保险公司:</text>
            <text class="text-value">{{ dataBean.carOutInsurance.qxInsuranceCompanyName|filterNull }}</text>
          </view>

          <view class="text-line">
            <text class="text-name">交强险赔付时间:</text>
            <text class="text-value">{{ dataBean.carOutInsurance.qxPayDate|filterNull }}</text>
          </view>

          <view class="text-line">
            <text class="text-name">交强险保险公司赔付金额:</text>
            <text class="text-value">￥{{ dataBean.carOutInsurance.qxPayFee|filterNull }}</text>
          </view>
          <view class="text-line">
            <text class="text-name">交强险客户赔付金额:</text>
            <text
                class="text-value">￥{{ dataBean.carOutInsurance.qxCustomerPaymentAmount|filterNull }}
            </text>
          </view>
        </view>


        <view class="text-line">
          <text class="text-name">备注:</text>
          <text class="text-value">{{ dataBean.carOutInsurance.remark|filterNull }}</text>
        </view>

        <picPdf :attachment="dataBean.carOutInsurance.attachment"></picPdf>

      </view>

      <no-data v-else content="暂无出险~"></no-data>


      <u-line color="#efefef" border-style="dashed" :customStyle="{'display': 'block',}"
              v-if="dataBean.outInsuranceButton">
      </u-line>

      <view class="btn-detail" v-if="dataBean.outInsuranceButton" @click="goCarOutInsurance">
        新增出险
      </view>


    </view>

    <examflow :from="pageType" :instanceId="instanceId" approvalName="carOutInsuranceApprove" :isAdd="false">
    </examflow>

    <view style="height: 100rpx;"></view>

    <view class="button-container" v-if="'myexam'==pageType">
      <button class="btn-item" v-if="dataBean.recallButton && bigType==3" @click="bottomClick(1)">撤回</button>
      <button class="btn-item" @click="bottomClick(2)">审核驳回</button>
      <button class="btn-item" @click="bottomClick(3)">审核通过</button>
    </view>
    <view class="button-container" v-else-if="dataBean.recallButton && bigType==3">
      <button class="btn-item" @click="bottomClick(1)">撤回</button>
    </view>

  </view>
</template>

<script>
import remindCarinfo from '@/components/remind-carinfo.vue';
import picPdf from '@/components/pic-pdf.vue';
import examflow from '@/components/exam-flow.vue';
import {
  outinsurance_handle
} from '@/common/http.api.js';
import collapseDetail from './collapseDetail.vue'

export default {
  components: {
    remindCarinfo,
    picPdf,
    examflow,
    collapseDetail
  },

  data() {
    return {
      dataBean: {
        carOutInsurance: {
          attachment: []
        },
        vehicle: {},
      },
      carId: '',
      pageType: '',
      approveId: '',
      businessId: '',
      instanceId: '',
      outInsuranceId: '',
      bigType: ''
    }
  },
  methods: {
    //新增出险
    goCarOutInsurance() {
      // var vehicle = JSON.stringify(this.dataBean.vehicle);

      getApp().globalData.outdanger_bean = this.dataBean.vehicle;

      uni.navigateTo({
        url: 'car-addOutdanger?carId=' + this.carId + '&pageType=add',
      })
    },

    getData() {
      this.$u.api.outinsuranceDetail({
        carId: this.carId,
        businessId: this.businessId,
      }).then(
          res => {
            this.dataBean = res;
            this.dataBean.carOutInsurance.insuranceCompensationList = res?.insuranceCompensationList || []
            this.dataBean.carOutInsurance.relatedCostsList = res?.relatedCostsList || []
            this.outInsuranceId = this.dataBean.carOutInsurance ? this.dataBean.carOutInsurance.id : '';
            if (res && res.carOutInsurance && res.carOutInsurance.instanceId) {
              this.instanceId = res.carOutInsurance.instanceId
            }
          }
      );
    },

    bottomClick(type) {
      switch (type) {
        case 1: //撤回
          uni.redirectTo({
            url: '/pagesA/exam/exam-flow?type=1&processKey=carOutInsuranceApprove&approveId=' + this
                .approveId + '&url=' + outinsurance_handle
          })
          break;
        case 2: //审核驳回
          uni.redirectTo({
            url: '/pagesA/exam/exam-flow?type=3&processKey=carOutInsuranceApprove&approveId=' + this
                .approveId + '&url=' + outinsurance_handle
          })
          break;
        case 3: //审核通过
          uni.redirectTo({
            url: '/pagesA/exam/exam-flow?type=4&processKey=carOutInsuranceApprove&approveId=' + this
                .approveId + '&url=' + outinsurance_handle
          })
          break;
      }

    },
  },

  onLoad(op) {
    // = uni.$u.test.isEmpty(op.modelId)?'':op.modelId
    this.carId = uni.$u.test.isEmpty(op.carId) ? '' : op.carId;
    this.pageType = uni.$u.test.isEmpty(op.pageType) ? '' : op.pageType;
    this.approveId = uni.$u.test.isEmpty(op.approveId) ? '' : op.approveId;
    this.businessId = uni.$u.test.isEmpty(op.businessId) ? '' : op.businessId;
    this.instanceId = uni.$u.test.isEmpty(op.instanceId) ? '' : op.instanceId;
    this.bigType = uni.$u.test.isEmpty(op.bigType) ? '' : op.bigType;

    console.log('aaa000', this.approveId)

    uni.$on('approval', res => {
      this.getData()
    })
  },
  onShow() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.btn-detail {
  width: 180rpx;
  height: 60rpx;
  border-radius: 50rpx;
  color: white;
  text-align: center;
  background-color: $blue15;
  font-size: 26rpx;
  line-height: 60rpx;
  align-self: flex-end;
  margin: 10rpx 20rpx 10rpx;
}

.nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  image {
    width: 200rpx;
    height: 100rpx;
  }

  text {
    margin-top: 35rpx;
    margin-bottom: 60rpx;
    font-size: 24rpx;
    color: #C5D3E8;
  }
}

//.button-container {
//	display: flex;
//	position: fixed;
//	width: 100%;
//	height: 100rpx;
//	bottom: 0;
//	z-index: 999;
//	background-color: white;
//	padding: 0 20rpx 0 0;
//	box-sizing: border-box;
//	display: flex;
//	align-items: center;
//	justify-content: space-around;
//
//	button {
//		flex: 1;
//		margin-left: 20rpx;
//		height: 80rpx;
//		line-height: 80rpx;
//		border-radius: 40rpx;
//		color: $xz-bgColor-write;
//		background-color: $xz-bgColor-blue;
//		font-size: 32rpx;
//	}
//
//}
</style>
